<template>
	<view class="symptom-detail-wrapper">
		<view class="header">
			<p class="title">
				{{info.title}}
			</p>
			<view class="btn" @click="goToPage()">
				预约挂号
			</view>
			<view class="clearfix"></view>
		</view>

		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" :lineWidth="30" :scrollable="false" :lineColor="'#41C177'" @change="tabChangeHandler"></u-tabs>
		</u-sticky>
		
		<view class="content" v-if="currentTabIndex == 0">
			<p v-html="info.detail"></p>
		</view>
		<view class="content" v-if="currentTabIndex == 1">
			<p v-html="info.reason"></p>
		</view>
		<view class="content" v-if="currentTabIndex == 2">
			<p v-html="info.diagnosis"></p>
		</view>
		<view class="content" v-if="currentTabIndex == 3">
			<p v-html="info.prevention"></p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						id: 0,
						name: '简介'
					},
					{
						id: 1,
						name: '病因'
					},
					{
						id: 2,
						name: '诊断'
					},
					{
						id: 3,
						name: '预防'
					}
				],
				currentTabIndex: 0,
				info: {},
			}
		},
		onLoad(option) {
			this.api_tank_detail(option.id)
		},
		methods: {
			tabChangeHandler(item) {
				this.currentTabIndex = item.id
				console.log(item)
			},

			api_tank_detail(id) {
				this.$app._get('entry/wxapp/answer.tank_detail', {
					id: id
				}, (result) => {
					console.log(result)
					this.info = result
				})
			},
			
			goToPage(url) {
				uni.navigateTo({
					url: '/pagesB/onlineRegistration/index?deptName=' + this.info.keshi_two_name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.symptom-detail-wrapper {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 15px;
		box-sizing: border-box;

		.header {
			background-image: linear-gradient(to right, #41C177, #c8e6c9);
			padding: 12px 15px;
			color: #ffffff;
			border-radius: 6px;

			.title {
				float: left;
			}

			.btn {
				float: right;
				padding: 3px 8px 3px 8px;
				border-radius: 15px;
				background-color: #41C177;
			}
		}
		
		.content {
			border-radius: 6px;
			border: 1px solid #e3e3e3;
			padding: 10px;
			line-height: 25px;
			background-color: #f5f5f5;
			font-size: .9rem;
			color: #757575;
			margin-top: 10px;
		}
	}
</style>